<template>
    <div class="container">
        <!-- <h3>产品信息</h3> -->
        <el-row style="margin-top:10px">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model.trim="searchName1" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch1">搜索</el-button>
                </el-input>
            </el-col>
            <el-button type="primary" v-if="added" style="float:right; margin-right: 10px" @click="goadd">新建产品</el-button>
        </el-row>
        <el-row>
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="title" sortable label="产品标题"></el-table-column>
            <!-- <el-table-column prop="standards" sortable label="产品图片">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handlecheck(scope.$index, scope.row)"
                    >{{scope.row.img}}</el-button>
                    
                </template>
            </el-table-column> -->
            <el-table-column prop="price" sortable label="价格">
                <template slot-scope="scope">
                    {{scope.row.price}}元
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        v-if="edit"
                        @click="handleedit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        v-if="del"
                        @click="handleDelete(scope.$index, scope.row)"
                        style="color: #ff0000"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
        </el-row>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>

<script>
import BigImg from '../../../common/BigImg.vue';
import {product_findByList,product_delete} from "@/request/api";
    export default {
        props: ['activeName1'],
        components: { 'big-img':BigImg},
        data() {
            return {
                added:true,
                del:true,
                edit:true,
                showImg:false,
                searchName1: '',
                tableData: [
                    
                ],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
            };
        },
        created(){
             var data = JSON.stringify(this.$store.state.cpxx)
            var a = "新增"
            var b = "编辑"
            var d = "删除"
            // if(data.indexOf(a) != -1){
            //     this.added = true
            // }else{
            //     this.added = false
            // }
            // if(data.indexOf(b) != -1){
            //     this.edit = true
            // }else{
            //     this.edit = false
            // }
            // if(data.indexOf(d) != -1){
            //     this.del = true
            // }else{
            //     this.del = false
            // }
        },
        mounted(){
            this.init()
        },
        methods: {
            handlecheck(index,row){
                this.showImg = true;
　　　　　　     this.imgSrc = this.$store.state.imageUrls + row.img;
            },
             viewImg(){
                this.showImg = false;
            },
            // 调用接口
            init(){
               product_findByList({
                   page:this.currentPage1,
                   title:this.searchName1,
                   companyId:this.activeName1
               }).then((res)=>{
                   this.tableData = res.rows
                   this.total1 = res.total
               })
            },
            goadd(){
                this.$router.push({
                    path: '/manageproductMessage/add',
                    query: { sid:this.activeName1 }
                });
            },
            // 
            handleedit(index,row){
                this.$router.push({
                    path: '/manageproductMessage/edit',
                    query: { id: row.id,sid:this.activeName1 }
                });
            },

            //删除  
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    product_delete(row.id).then((res) =>{
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        this.init()
                    })
                });
            },
            // 搜索
            handleSearch1() {
                this.init()
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init()
            },
            
        },
        watch: {
            activeName1:{
            handler(newVal, oldVal) {
                // console.log(newVal)
                this.currentPage1 = 1
                
                // this.currentPage6 = 1
                // this.activeName = "中药材"
                this.activeName1 = newVal
                this.init()
                },
                deep: true
            }
        }
    }
</script>

<style scoped>
.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
.el-col{
    margin-bottom:0;
}
</style>